<!-- eslint-disable vue/html-indent -->
<template>
  <div class="app-main-container xpadding">
    <Breadcrumb :name="translate('jcsj')" />
    <div class="reserve">
      <!-- <div class="app-main-title">场地预定</div> -->
      <el-tabs v-model="activeName" @tab-click="tabChange">
        <el-tab-pane name="1" :label="translate('ktjl')">
          <div class="warnningTip">
            <i class="el-icon-warning-outline" />
            {{ translate("sportStr1") }}
          </div>
          <QueryForm
            v-model="filtera"
            :query-form-config="queryFormConfig"
            @handleQuery="getList(1)"
            @clear="clearList"
          />
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            :cell-class-name="tableRowClassName"
            fit
            :header-row-class-name="'table-header'"
            class="doumee-element-table"
          >
            <el-table-column
              align="center"
              :label="translate('siteId')"
              min-width="250"
              prop="objId"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('siteName')"
              min-width="120"
              prop="objName"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('openCombo')"
              min-width="120"
              prop="mealName"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('kaitongTime')"
              min-width="180"
              prop="openTime"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('dqsj')"
              min-width="180"
              prop="expirationTime"
              show-overflow-tooltip
            >
              <template v-slot="scope">
                <span :class="scope.row.red ? 'secondColor' : ''">{{
                  scope.row.expirationTime
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="translate('ztsandsy')"
              min-width="120"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.totalNum }}/{{ scope.row.surplusNum }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page.sync="pagination.page"
            hide-on-single-page
            @current-change="getList"
          />
        </el-tab-pane>
        <el-tab-pane name="2" :label="translate('ryppkt')">
          <PersonalRecord v-if="activeName == '2'" />
        </el-tab-pane>
        <el-tab-pane name="4" :label="translate('hyktjl')">
          <MemberRecord v-if="activeName == '4'" />
        </el-tab-pane>
        <el-tab-pane
          v-if="meta.indexOf('commonConfigList') > -1"
          name="3"
          :label="translate('commonset')"
        >
          <Set v-if="activeName == '3'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import {
  wonderfulMomentsOpenlist
} from '@/api'
import { queryFormConfig } from './config'
import Breadcrumb from '@/views/application/components/Breadcrumb.vue'
import PersonalRecord from './tabs/personalRecord.vue'
import MemberRecord from './tabs/memberRecord.vue'
import Set from './tabs/set.vue'
export default {
  name: 'OptionsWonderful',
  components: {
    Breadcrumb,
    PersonalRecord,
    MemberRecord,
    Set
  },
  data() {
    return {
      queryFormConfig,
      subLoading: false,
      meta: [],
      listLoading: false,
      activeName: '1',
      filtera: {},
      param: {
        discountList: [],
        chargeList: []
      },
      sfLxlist: [
        {
          label: this.translate('charge'),
          value: '1'
        },
        {
          label: this.translate('free'),
          value: '0'
        }
      ],
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
    console.log(this.$route.query)
  },
  methods: {
    // 获取配置详情
    // 标红table指定行
    tableRowClassName({ row, column, rowIndex, columnIndex }) {
      // 判断条件（quantityStock ，warningLimit ，quantityStock 列表字段信息）
      if (row.isRed === '1' && column.property === 'expirationTime') {
        // 后面的css样式
        return 'red'
      } else {
        return ''
      }
    },
    // 切换
    tabChange(tab) {
      this.activeName = tab.name
      if (tab.name === '1') {
        this.getList(1)
      }
    },
    clearList() {
      this.filtera = {}
      this.getList(1)
    },
    getList(page) {
      this.listLoading = true
      const { filtera, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      if (this.pagination.page === 1) {
        pagination.firstQueryTime = parseTime(new Date())
      }
      wonderfulMomentsOpenlist({ pagination, param: { ...filtera } })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.total = res.totalCount
            const nowTime = new Date().getTime()
            this.list.forEach(item => {
              if (item.expirationTime) {
                const expirationTime = new Date(item.expirationTime).getTime()
                if ((expirationTime - nowTime) < 86400000 * 30) {
                  item.red = true
                }
              }
            })
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.fl4 {
  width: 25%;
  display: inline-block;
}
.fl2 {
  display: inline-block;
}
</style>
